<template>
	<div class="global-table-search" :style="'height:' + autoHeight + ';'">
		<el-form ref="queryForm" :inline="true" :model="queryForm" class="" size="small" style="margin-top: 4px">
			<el-row>
				<slot name="firstLine" />
				<el-col :span="formSpan" class="search-from-row">
					<el-form-item>
						<el-button type="primary" round @click="refresh">
							<el-icon>
								<el-icon-search />
							</el-icon>
							<span> 查询 </span>
						</el-button>
						<el-button type="warning" round @click="resetSearch">
							<el-icon>
								<el-icon-refresh-right />
							</el-icon>
							<span> 重置 </span>
						</el-button>
						<template v-if="isMoreQuery">
							<el-link href="javascript:void(0);" type="primary" style="margin-left: 8px" @click="changeAdvanced">
								{{ advanced ? '收起' : '展开' }}
								<i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
							</el-link>
						</template>
					</el-form-item>
				</el-col>
			</el-row>
			<div v-show="advanced">
				<slot name="otherLine" />
			</div>
		</el-form>
	</div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({
	props: {
		/** 查询表单数据*/
		queryForm: {},
		/** 查询按钮占用格数*/
		formSpan: {
			type: Number,
			default: 6
		},
		/** 是否有收起展开*/
		isMoreQuery: {
			type: Boolean,
			default: false
		}
	},
	emits: ['refresh']
})
export default class SearchForm extends Vue {
	/**搜索面板 */
	advanced = false;
	autoHeight = '40px';
	/**搜素面板控制 */
	changeAdvanced() {
		if (this.advanced) {
			this.autoHeight = '40px';
		} else {
			this.autoHeight = 'auto';
		}
		this.advanced = !this.advanced;
	}
	/**重置搜素 */
	resetSearch() {
		let example: any = this.$refs['queryForm'];
		example.resetFields();
		this.$emit('refresh');
	}
	/**查询 */
	refresh() {
		this.$emit('refresh');
	}
}
</script>
<style lang="scss"></style>
